<template>
  <!-- 预览 -->
    <el-dialog
      title="题目预览"
      :visible="visible"
      @close="dialogClose">
      <el-row style="height: 65px;">
        <el-col :span="6" style="margin-bottom: 20px">【题型】：{{ questionType[(rowData.questionType)].label }}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【编号】：{{ rowData.id }}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【难度】：{{ rowData.difficulty}}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【标签】：{{ rowData.tags }}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【学科】：{{ rowData.subjectName }}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【目录】：{{ rowData.directoryName }}</el-col>
        <el-col :span="6" style="margin-bottom: 20px">【方向】：{{ rowData.direction }}</el-col>
      </el-row>
      <hr>
      <el-row>
        <el-row style="height: 30px;">
          【题干】：
        </el-row>
        <el-row style="height: 30px; color: blue;">
          {{ dealQuestion(rowData.question) }}
        </el-row>
        <el-row style="height: 30px;">
          {{ questionType[(rowData.questionType)].label }}题 选项：（以下选中的选项为正确答案）
        </el-row>
        <!-- 单选 -->
        <el-row v-if="rowData.questionType === '单选'">
          <el-row style="height: 30px;">
            <el-radio v-model="radio" label="1">备选项</el-radio>
          </el-row>
          <el-row style="height: 30px;">
            <el-radio v-model="radio" label="1">备选项</el-radio>
          </el-row>
          <el-row style="height: 30px;">
            <el-radio v-model="radio" label="1">备选项</el-radio>
          </el-row>
          <el-row style="height: 30px;">
            <el-radio v-model="radio" label="1">备选项</el-radio>
          </el-row>
        </el-row>
        <!-- 多选 -->
        <el-row v-if="rowData.questionType === '多选'">
          <el-checkbox v-model="checked" style="height: 30px;">备选项</el-checkbox>
        </el-row>
        <hr>
        <el-row style="height: 40px; line-height: 40px">
          【参考答案】：<el-button type="danger" size="small">视频答案预览</el-button>
        </el-row>
        <hr>
        <el-row  style="height: 40px; line-height: 40px">
          【答案解析】：{{ dealQuestion(rowData.answer) }}
        </el-row>
        <hr>
        <el-row style="height: 40px; line-height: 40px">
          【题目备注】：{{ rowData.remark }}
        </el-row>
      </el-row>
      <span slot="footer" class="dialog-footer" style="display: block; text-align: right">
        <el-button type="primary" @click="dialogClose()">关闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      questionType: {}
    }
  },
  methods: {
    dialogClose() {
      this.$emit('close-dialog')
    },
    dealQuestion(str) {
      const reg = /(<([^>]+)>)/ig
      if(str) {
        return str.replace(reg, "")
      }
      
    }
  }
}
</script>

<style>

</style>